<template>
	<view class="">
		<!-- 选项栏 -->
		<view class="choose">
			<view :class="['choose_item',nav_index==index ? 'choose_item_item':'']" v-for="(item,index) in nav" @tap="change(index)">
				{{item}}
				<view class="line"></view>
			</view>
		</view>
		<tip-list :tipList="tipList"></tip-list>
	</view>
</template>

<script>
	import tipList from '@/components/index/tiplist.vue'
	export default {
		components:{tipList},
		data () {
			return {
				nav_index:0,
				// 选项卡
				nav: ['由近到远','发布时间'],
				tipList:[
					{
						title:'昆山首届城市拉力赛',
						date:'2019.10.16',
						num:'12',
						area:'合肥市',
						name:'合肥官方跑团一群',
						state:'0'
					},
					{
						title:'昆山首届城市拉力赛',
						date:'2019.10.16',
						num:'12',
						area:'合肥市',
						name:'合肥官方跑团一群',
						state:'1'
					}
				]
			}
		},
		methods: {
			change(key) {
				this.nav_index = key
			}
		}
	}
</script>

<style lang="less" scoped>
	.choose {
		margin-top: 20upx;
		width: 100%;
		height: 60upx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.choose_item {
		color: #333333;
		font-size: 32upx;
		height: 56upx;
		position: relative;
		.line {
			display: none;
			position: absolute;
			width: 35upx;
			height: 4upx;
			background-color: #8837d1;
			bottom: 0;
			left: 50%;
			transform: translate(-50%);
		}
	}
	.choose_item_item {
		font-size: 32upx;
		color: #8837d1;
		font-weight: bold;
		.line {
			display: block;
		}
	}
</style>
